
<template>
  <div class="main-layout">
    <div class="top_part">
      <!-- 查询表单开始 -->
      <el-form
        ref="form" :model="params"
        label-width="100px"
        style="border-bottom: 1px solid #dbdde3; margin-bottom: 10px"
      >
        <div class="screenFlex">
          <div class="searchFormFlex">
            <el-row>
                <el-col
                  :span="8"
                >
                  <el-form-item label="名称" style="margin-left:-50px;">
                    <el-input
                      v-model="params.reportName"
                      clearable
                      placeholder="名称"
                      class="filter-item"
                    />
                  </el-form-item>
                </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="报表编码">
                  <el-input
                    v-model="params.reportCode"
                    clearable
                    placeholder="报表编码"
                    class="filter-item"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="screenButtons">
            <el-button
              class="button"
              size="large"
              plain
              type="success"
              icon="el-icon-plus"
              @click="openAddDialog"
            >新增</el-button
            >
            <el-button
              class="button refresh-btn"
              size="large"
              plain
              icon="el-icon-refresh-right"
              @click="reset('form')"
            >重置</el-button
            >
            <el-button
              class="button"
              size="large"
              type="primary"
              icon="el-icon-search"

              @click="search('form')"
            >查询</el-button
            >
          </div>
        </div>
      </el-form>
      <!-- 查询表单结束 -->
      <!-- 批量操作 -->
    </div>

    <el-row :gutter="20">
      <el-col v-for="item in list" :key="item.id" :span="6">
        <div class="bg">
          <img
            class="bg-img"
            :src="
              item.reportImage == null || item.reportImage == ''
                ? require('@/assets/images/newimg/paint-backl.png')
                : item.reportImage
            "
            alt=""
          />
          <div class="content">
            <header>
              <img src="../../../assets/images/newimg/computer-icon.png" width="54px;"/>
              <div style="height:20px;" class="report-name">{{ item.reportName }}</div>
              <div style="height:20px;" class="info-block">
                <span>{{ item.updateTime }}</span>
              </div>
            </header>
            <footer>
              <div class="operationleft">
                  <el-tooltip class="item" effect="dark" content="报表详情" placement="bottom">
                    <el-button
                      icon="el-icon-tickets"
                      class="view"
                      type="text"
                      style="margin-right: 10px;"
                      @click="detail(item)"
                    />
                  </el-tooltip>
                  <el-popconfirm
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除该报表吗？"
                      @confirm="reportDelete(item)"
                    >
                    <template #reference>
                      <el-tooltip class="item" effect="dark" content="删除报表" placement="bottom">
                        <el-button
                          icon="el-icon-delete"
                          class="del"
                          type="text"
                        />
                      </el-tooltip>
                    </template>
                  </el-popconfirm>
                </div>
              <div class="operation">
                <el-tooltip class="item" effect="dark" content="分享表格" placement="bottom">
                  <el-button
                    icon="el-icon-share"
                    class="view"
                    type="text"
                    @click="share(item)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="预览表格" placement="bottom">
                  <el-button
                    icon="el-icon-view"
                    class="view"
                    type="text"
                    @click="viewDesign(item)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑表格" placement="bottom">
                  <el-button
                    icon="el-icon-edit"
                    class="edit"
                    type="text"
                    @click="openDesign(item)"
                  />
                </el-tooltip>
              </div>
            </footer>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="text-align: right">
      <el-pagination
        :total="totalCount"
        :page-sizes="[8, 20, 50, 100]"
        :page-size="params.pageSize"
        :current-page="params.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Share
      :visib="visibleForShareDialog"
      :reportCode="reportCodeForShareDialog"
      :reportName="reportNameForShareDialog"
      :reportType="reportTypeForShareDialog"
      @handleClose="visibleForShareDialog = false"
    />

    <el-dialog 
      :title="addDialogTitle" 
      center 
      :visible.sync="addDialogVisbie"
    >
      <el-form 
        :model="addForm" 
        :rules="rules" 
        ref="ruleForm" 
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="报表名称" prop="reportName">
              <el-input v-model="addForm.reportName" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报表编码" prop="reportCode">
              <el-input :disabled="addDialogTitle !== '报表新增'" v-model="addForm.reportCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制作人">
              <el-input v-model="addForm.reportAuthor" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述">
              <el-input v-model="addForm.reportDesc" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报表缩略图">
              <el-upload
                v-model="addForm.reportImage"
                class="avatar-uploader"
                :headers="headers"
                action="http://172.18.27.67:8081/report/uPicture"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                >
                <img v-if="addForm.reportImage" :src="addForm.reportImage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveCancel('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="saveAdd('ruleForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Share from "./components/share";
import { getToken } from '@/utils/auth'
import { reportPageList,addReport,reportDeleteBatch,editReport } from "@/api/excelReport/report";
// import { detail } from "@/api/excelReport/GaeaReport";
export default {
  name: "Login",
  components: { Share },
  data() {
    return {
      list: [],
      rules: {},
      totalCount: 0,
      totalPage: 0,
      params: {
        reportCode: "",
        reportName: "",
        reportType: "report_excel",
        pageNumber: 1,
        pageSize: 8,
        order: "DESC",
        sort: "update_time"
      },
      // 分享
      visibleForShareDialog: false,
      reportCodeForShareDialog: "",
      reportNameForShareDialog: "",
      reportTypeForShareDialog: "",
      addDialogVisbie:false,
      addForm:{},
      rules:{
        reportName: [
            { required: true, message: '请输入报表名称', trigger: 'blur' },
          ],
        reportCode: [
            { required: true, message: '请输入报表编码', trigger: 'blur' },
          ],
      },
      headers:{
        Authorization:getToken()
      },
      addDialogTitle:'报表新增'
    };
  },
  mounted() {},
  created() {
    this.queryByPage();
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res, file) {
        console.log('res',res);
        console.log('file',file);
        // URL.createObjectURL(file.raw)
        this.$set(this.addForm,'reportImage',res.data.msg)
      },
    // 新增
    openAddDialog() {
      this.addForm = {}
      this.addDialogTitle = '报表新增'
      this.addDialogVisbie = true
      // this.addForm.reportCode = Math.floor(Math.random()*Math.pow(10,10))
    },
    saveAdd(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.addForm.enableFlag = 1
            this.addForm.reportGroup = "default"
            this.addForm.reportType = "report_excel"
            let method = this.addDialogTitle === '报表新增' ? addReport : editReport
            let message = this.addDialogTitle === '报表新增' ? '新增成功' : '编辑成功'
            method(this.addForm).then( res => {
              if(res.data.code === 200){
                this.addDialogVisbie = false
                this.addForm = {}
                this.$refs[ruleForm].resetFields();
                this.search()
                this.$message({
                  message: message,
                  type: 'success'
                });
              }
              if(res.data.msg === '报表code已经存在'){
                this.$message({
                  message: '报表编码已经存在',
                  type: 'error'
                });
              }
            })
          }
        });
    },
    saveCancel(ruleForm) {
      this.addForm = {}
      this.addDialogVisbie = false
      this.$refs[ruleForm].resetFields();
    },
    // 查询
    search() {
      this.params.pageNumber = 1;
      this.queryByPage();
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields();
      this.params.reportName = "";
      this.params.reportCode = "";
      this.params.pageNumber = 1;
      this.queryByPage();
    },
    async queryByPage() {
      let res = await reportPageList(this.params);
      res = res.data
      if (res.code != "200") return;
      this.listLoading = true;
      this.list = res.data.records;
      this.list.forEach(value => {
        value["reportNameCode"] =
          value.reportName + "[" + value.reportCode + "]";
      });
      this.totalCount = res.data.total;
      this.totalPage = res.data.pages;
      this.listLoading = false;
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.queryByPage();
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val;
      this.queryByPage();
    },
    // 分享
    share(val) {
      this.reportCodeForShareDialog = val.reportCode;
      this.reportNameForShareDialog = val.reportName;
      this.reportTypeForShareDialog = val.reportType;
      this.visibleForShareDialog = true;
    },
    openDesign(val) {
      let routeUrl = this.$router.resolve({
        path: "/excelreport/designer",
        query: {
          reportCode: val.reportCode
        }
      });
      window.open(routeUrl.href, "_self");
    },
    viewDesign(val) {
      let routeUrl = this.$router.resolve({
        path: "/excelreport/viewer",
        query: { reportCode: val.reportCode }
      });
      window.open(routeUrl.href, "_self");
    },
    //详情
    detail(val) {
      this.addDialogTitle = '报表详情'
      this.addForm = val
      this.addDialogVisbie = true
    },
    // 列表删除
    reportDelete(val) {
      reportDeleteBatch([val.id]).then(res => {
        if(res.data.code){
          this.queryByPage();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.main-layout {
  padding: 20px;
  position: relative;
  height: auto;
  background: #fff;
  header {
    font-size: 24px;
    >img{
      margin-left: 22px;
      margin-top: 22px;
      height:54px;
    }
    .report-name{
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #1D2129;
      text-align: left;
      padding-left: 22px;
      line-height:20px;
    }
    .info-block{
      display: flex;
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #1D2129;
      justify-content: space-between;
      padding:0 22px;
      line-height:20px;
      margin-top:20px;
    }
  }
  .bg {
    width: 100%;
    height: 226px;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: 0px 3px 6px 1px rgba(35,93,238,0.2);
    border-radius: 20px 20px 20px 20px;
  }
  .bg .bg-img {
    position: absolute;
    width: 100%;
    height: 170px;
    z-index: 2;
    opacity: 0.6;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    color: #fff;
    left: 0;
    top: 0;
    z-index: 3;
  }
  footer {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    line-height: 30px;
    position: absolute;
    z-index: 3;
    bottom: 0;
    .operationleft{
        float: left;
        .del{
          color: red;
          font-size: 15px;
        }
        .view{
          color: #235DEE;
          font-size: 15px;
        }
      }
    .operation {
      
      float: right;
      .view,
      .edit {
        color: #235DEE;
        font-size: 15px;
      }
    }
  }
  .screenFlex {
    display: flex;
  }
  .searchFormFlex {
    flex: 1;
  }
  .screenButtons {
    padding-left: 20px;
  }
  .refresh-btn{
    background:rgba(35,93,238,0.15);
    color:#235DEE;
    &:hover,&:active,&:focus{
      background:rgba(35,93,238,0.2) !important;
    }
  }
  ::v-deep .el-dropdown-link{
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    i{
      transform: rotate(90deg);
    }
  }
  ::v-deep .el-pagination__sizes{
    .el-input__inner{
      height:30px !important;
      line-height:30px;
      border:1px dashed #B8C5D3
    }

  }
  ::v-deep .is-in-pagination{
    .el-input__inner{
      height:30px;
      line-height:30px;
      border:1px dashed #B8C5D3
    }
  }
  ::v-deep .btn-prev,::v-deep .btn-next{
    background-color: #fff !important;
    border:1px dashed #B8C5D3;
    padding:0px;
    width:27px !important;
    min-width:0px;
  }
}
::v-deep .el-paper li{
  margin: 0 5px;
  padding:0px;
  width:27px;
  min-width:0px;
}
::v-deep .el-pager li.active {
  background-color: #5887fb !important;
  color: #ffffff !important;
  border-radius: 4px;
  margin: 0 5px;
  min-width:27px;
}


.avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
